
import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
import cs from 'classnames';
import sty from './sty.module.css';

import TitleInfo from './child/titleInfo';
import LeftList from './child/leftList';

import SongsList from '@/components/songsList';
import qs from 'query-string';
import { getTopListDetail, getTopList } from './store/actionCreator'
import { shallowEqual, useSelector, useDispatch } from 'react-redux';

import { useLocation } from 'react-router-dom';

const Rank = () => {
  const [index, setIndex] = useState(0);
  const { topList, songsList } = useSelector(state => ({
    topList: state.getIn(['ranking', 'topList']),
    songsList: state.getIn(['ranking', 'songsList'])
  }), shallowEqual)
  const dispatch = useDispatch();
  const location = useLocation()

  useEffect(() => {
    dispatch(getTopList())
  }, [dispatch])
  useEffect(() => {
    let search = qs.parse(location.search);
    console.log('search', location);
    console.log('search', search);
    dispatch(getTopListDetail(search.id))
  }, [dispatch, location])


  useEffect(() => {
    let { id } = qs.parse(location.search);
    if (id && topList.length) {
      id = Number(id);
      console.log('update', id);
      const i = topList.findIndex(v => v.id === id);
      setIndex(i)
    }
  }, [location, topList])


  const idx = useMemo(() => index, [index])
    ;
  const list = useMemo(() => topList, [topList]);
  const songs = useMemo(() => songsList, [songsList]);

  return <div className={cs(sty.root, 'flex1', 'wrap2')}>
    <LeftList
      topList={list} idx={idx} />
    <div className={sty.right}>
      <TitleInfo />
      <div className={sty.list}>
        <SongsList list={songs} />
      </div>
    </div>

  </div>
}
export default memo(Rank)